<template>
  <div class="attrtop">
    <div class="number-grow-warp hover" v-for="item of objArr" :key="item.id">
      <i :class="item.icon"></i>
      <div class="bom">
        <p>{{ item.name }}</p>
        <span :ref="item.ref" :data-time="item.time" class="number-grow" :data-value="item.num">0</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    objArr: {
      type: Array,
      required: true
    }
  },
  methods: {
    numberGrow(ele, num, time) {
      let step = (num * 10) / (time * 1000);
      let current = 0;
      let start = 0;
      let t = setInterval(function() {
        start += step;
        if (start > num) {
          clearInterval(t);
          start = num;
          t = null;
        }
        if (current === start) {
          return;
        }
        current = Math.floor(start);
        ele[0].innerHTML = current
          .toString()
          .replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,");
      }, 10);
    }
  },
  mounted() {
    this.objArr.some((item) => {
      this.numberGrow(this.$refs[item.ref], item.num, item.time);
    });
  }
};
</script>

<style lang="sass">
.attrtop
	display: flex
	justify-content: space-between
.number-grow-warp
	width: 250px
	display: flex
	justify-content: space-around
	align-items: center
	background: #fff
	border-radius: 10px
	padding: 20px 10px
	margin: 0 0 20px
	cursor: pointer
	i
		font-size: 50px
	.bom
		p
			margin: 10px 0
.hover
  i
    padding: 5px
    border-radius: 5px
    transition: all .5s
.hover:hover 
  i
    background: rgb(51, 87, 87);
    color: #eee;
</style>
<style>

</style>